<template>
    <div class="filter-main">
        <div class="box">
            <div class="box-title">是否包邮</div>
            <div class="box-content">
                <tag-switch :checked="isFreeFee" :toggleChecked="toggleFreeFee" tagTitle="包邮"/>
            </div>
        </div>
        <div class="box">
            <div class="box-title">经营类型</div>
            <div class="box-content">
                <tag-list-switch :data-list="operateTypeList" :switch-data-list="switchOperateTypeList"/>
            </div>
        </div>
        <div class="box">
            <div class="box-title">价格区间</div>
            <div class="box-content">
                <div class="range-price">
                    <div><input type="text" maxlength="8"></div>
                    <div style="padding: 0 .4rem">-</div>
                    <div><input type="text" maxlength="8"></div>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="box-title">全部分类</div>
            <div class="box-content">
                <tag-list-switch :data-list="cateList" :switch-data-list="cateListFn"/>
            </div>
        </div>
        <div class="footer">
            <button style="color: black;background-color: white">重置</button>
            <button style="color: white;background-color: #e64a49">确定</button>
        </div>
    </div>
</template>
<script>
    import TagSwitch from '../../../components/TagSwitch'
    import TagListSwitch from "../../../components/TagListSwitch"

    export default {
        components: {
            "tag-switch": TagSwitch,
            "tag-list-switch": TagListSwitch
        },
        methods: {
            toggleFreeFee() {
                this.isFreeFee = !this.isFreeFee
            },
            switchOperateTypeList(id) {
                this.operateTypeList = this.operateTypeList.map((item) => {
                    return {...item, checked: item.id === id}
                })
            },
            cateListFn(id){
                this.cateList = this.cateList.map((item) => {
                    return {...item, checked: item.id === id}
                })
            }
        },
        data() {
            return {
                isFreeFee: false,
                operateTypeList: [
                    {title: "平台自营", id: 1, checked: false},
                    {title: "合作店铺", id: 2, checked: false},
                ],
                cateList:[
                    {title: "服装服饰", id: 1, checked: false},
                    {title: "电脑手机", id: 2, checked: false},
                    {title: "外设键盘", id: 3, checked: false},
                    {title: "家用电器", id: 4, checked: false},
                    {title: "钟表珠宝", id: 5, checked: false},
                ]
            }
        }
    }
</script>
<style lang="less">
    .filter-main {
        height: 100%;
        background-color: #F7F7F7;
        position: relative;
    }

    .box {
        padding: .6rem .6rem .4rem;
        background-color: white;
        margin-bottom: .4rem;
        border-radius: .75rem;

        .box-title {
            font-weight: 600;
            font-size: .8rem;
        }

        .box-content {
            padding: .2rem 0;
        }

        .range-price {
            display: flex;

            input {
                box-sizing: border-box;
                background-color: #F5F5F5;
                border-radius: .75rem;
                border: none;
                width: 100%;
                text-align: center;
                font-size: .7rem;
                padding: .2rem;
            }
        }
    }
    .footer{
        box-sizing: border-box;
        position: absolute;
        border-top: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-around;
        padding: .4rem;
        button{
            border: none;
            padding: .3rem 1rem;
            border-radius: .75rem;
            font-size: .7rem;
        }
        bottom: 0;
        width: 100%;
    }
</style>
